<template>
  <div id="app">
    <TopNav/>
    <div class="header">
    </div>
    <div class="content">
      <p class="com" :class="{'no':v.falg}" v-for="(v,k) in arr" :key="k" @click="setCom(k)">
        {{v.text}}
        </p>
    </div>
    <component :is="'First'" v-if="arr[0].falg"></component>
    <component :is="'Miss'" v-if="arr[1].falg"></component>
    <component :is="'Food'" v-if="arr[2].falg"></component>
    <component :is="'Baby'" v-if="arr[3].falg"></component>
  </div>
</template>

<script>
import First from './First';
import Miss from './Miss';
import Food from './Food';
import Baby from './Baby';
import TopNav from './zfc/com/TopNav/TopNav';

export default {
  name: "App",
  data() {
    return {
       arr:[
         {
           text:'推荐',
           falg:true
         },
         {
            text:'贼惦记',
           falg:false
         },
         {
            text:'美食',
           falg:false
         },
         {
            text:'母婴',
           falg:false
         },
       ]
    }
  },
  methods: {
    setCom(k){
        this.arr.forEach((v)=>{
          v.falg = false
        });
        this.arr[k].falg = true;
    },
    
    
  },
  
 
  components:{
    First,
    Miss,
    Food,
    Baby,
    TopNav
  },
}
</script>

<style scoped>
.header{
  width: 100%;
  height: 0.96rem;
  background-color: #e53e42;
  
}
.content{
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
  display: flex;
  justify-content: space-around;
  border-bottom: 0.01rem solid #ccc;
   background-color: #fff;
}
.com{
  font-size: 0.3rem;
}

.no{
  border-bottom: 0.01rem solid #e53e42;
  color: #e53e42;
}

</style>